import React from "react";
import {Table, Breadcrumb, Button, Input, Tag, Switch, Card, Carousel, Modal, message} from 'antd';
import CustomLayout from "../../../components/CustomLayout/customLayout";
import {
    _deletePictureAlbumById,
    _deleteRoleById,
    _queryPictureAlbumsByPage,
    _queryRolePage
} from "../../../utils/apiList";

const {Search} = Input;
const {Meta} = Card;

class CatalogList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabData: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tabLoading: false,
            visible: false,
            imgList: [],
            prevTitle: '',
            prevDiscr: '',
        };
    }

    componentDidMount() {
        this.loadTable()
    }

    loadTable() {
        const {pageNum, pageSize} = this.state;
        this.setState({tabLoading: true});
        _queryPictureAlbumsByPage({pageNo: pageNum, pageSize}).then((res) => {
            if (res.data.success) {
                this.setState({
                    tabData: res.data.data.list ? res.data.data.list : [],
                    total: res.data.data.total ? res.data.data.total : [],
                    tabLoading: false,
                })
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    }

    changePageSize(pageSize, current) {
        this.setState({pageSize, pageNum: 1}, () => this.loadTable())
    }

    changePage(current) {
        this.setState({pageNum: current}, () => this.loadTable())
    }

    handleDelete = (id) => {
        _deletePictureAlbumById({id}).then((res) => {
            if (res.data.success) {
                message.success(<b>删除成功</b>, 3);
                this.loadTable();
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    };

    handlePreview = (record) => {
        this.setState({
            imgList: record.picturecover ? record.picturecover.split(',') : [],
            prevTitle: record.albumname ? record.albumname : '',
            prevDiscr: record.albumdescription ? record.albumdescription : '',
            visible: true,
        });
    };

    handleCancel = () => {
        this.setState({visible: false});
    };

    render() {
        const {tabData, pageSize, pageNum, total, tabLoading, visible, imgList, prevTitle, prevDiscr} = this.state;
        const columns = [
            {
                title: '画册名称',
                dataIndex: 'albumname',
                key: 'albumname',
                width: 300,
            }, {
                title: '对接人信息',
                children: [
                    {
                        title: '对接人',
                        dataIndex: 'contactperson',
                        key: 'contactperson',
                        align: 'center'
                    },
                    {
                        title: '电话',
                        dataIndex: 'contactpersonphone',
                        key: 'contactpersonphone',
                    },
                    {
                        title: '微信',
                        dataIndex: 'contactpersonwechat',
                        key: 'contactpersonwechat',
                    },
                    {
                        title: '邮箱',
                        dataIndex: 'contactpersonemail',
                        key: 'contactpersonemail',
                    },
                ]
            }, {
                title: '上/下架',
                key: 'shelfstatus',
                width: 100,
                align: 'center',
                fixed: 'right',
                render: (text, record) => (<Switch defaultChecked/>),
            }, {
                title: '操作',
                key: 'operation',
                width: 300,
                align: 'center',
                fixed: 'right',
                render: (text, record) => (<div>
                    <Button style={{marginRight: 10}} onClick={() => this.handlePreview(record)}>预览</Button>
                    <Button style={{marginRight: 10}} type="primary">修改</Button>
                    <Button type="danger" onClick={() => this.handleDelete(record.id)}>删除</Button>
                </div>),
            },
        ];
        return (
            <CustomLayout>
                <Breadcrumb style={{margin: '16px 0'}}>
                    <Breadcrumb.Item>品牌与产品管理</Breadcrumb.Item>
                    <Breadcrumb.Item>画册管理</Breadcrumb.Item>
                </Breadcrumb>
                <div className={'App-Section'}>
                    <div style={{margin: 10}}>
                        <Button style={{marginRight: 10}} type="primary" onClick={() => {
                            this.props.history.push('/tianyi/catalogUpload');
                            window.localStorage.setItem('menuSelect', '43');
                            window.localStorage.setItem('menuOpen', '4');
                        }}>新增</Button>
                    </div>
                    <Table
                        bordered
                        columns={columns}
                        rowKey={'id'}
                        loading={tabLoading}
                        // rowSelection={rowSelection}
                        // expandedRowRender={expandedRowRender}
                        dataSource={tabData}
                        pagination={{
                            showSizeChanger: true,
                            showQuickJumper: false,
                            showTotal: () => `共${total}条`,
                            pageSize: pageSize,
                            current: pageNum,
                            total,
                            onShowSizeChange: (current, pageSize) => this.changePageSize(pageSize, current),
                            onChange: (current) => this.changePage(current),
                        }}
                    />
                </div>
                <Modal
                    visible={visible}
                    title={'预览'}
                    footer={null}
                    onCancel={this.handleCancel}
                    width={500}
                    centered
                >
                    <Carousel autoplay>
                        {
                            imgList.map(item => {
                                return <div>
                                    <img alt="example"
                                         style={{width: '100%',height:600}}
                                         src={`/photo/getSourceImg?imgName=${item}`}
                                    />
                                </div>
                            })
                        }
                    </Carousel>
                    <div><b>{prevTitle}</b></div>
                    <div>{prevDiscr}</div>
                </Modal>
            </CustomLayout>
        );
    }
}

export default CatalogList;